<template>
  <i-col :span="12">
    <dl class="basicInfo-block cf">
      <dt class="basicInfo-item name" style="width: 140px;font-size: 14px;">所属企业&nbsp;:</dt>
      <dd class="basicInfo-item value" style="text-align:right;font-size: 14px;">
        {{selectRow.companyName}}
      </dd>
    </dl>
    <dl class="basicInfo-block cf">
      <dt class="basicInfo-item name" style="width: 140px;font-size: 14px;">所属区域&nbsp;:</dt>
      <dd class="basicInfo-item value" style="text-align:right;font-size: 14px;">
        {{selectRow.groupName}}
      </dd>
    </dl>
    <dl class="basicInfo-block cf">
      <dt class="basicInfo-item name" style="width: 140px;font-size: 14px;">Iot ID&nbsp;:</dt>
      <dd class="basicInfo-item value" style="text-align:right;font-size: 14px;">
        {{selectRow.iotId}}
      </dd>
    </dl>
    <dl class="basicInfo-block cf" v-if="nodeType===0">
      <dt class="basicInfo-item name" style="width: 140px;font-size: 14px;">所属网关&nbsp;:</dt>
      <dd class="basicInfo-item value" style="text-align:right;font-size: 14px;">
        {{selectRow.parentName}}
      </dd>
    </dl>
    <dl class="basicInfo-block cf" v-if="nodeType===0">
      <dt class="basicInfo-item name" style="width: 140px;font-size: 14px;">报警状态&nbsp;:</dt>
      <dd class="basicInfo-item value" style="text-align:right;font-size: 14px;">
        {{selectRow.alarmStatus ==1?'告警':'正常'}}
      </dd>
    </dl>
    <dl class="basicInfo-block cf">
      <dt class="basicInfo-item name" style="width: 140px;font-size: 14px;">设备ID&nbsp;:</dt>
      <dd class="basicInfo-item value" style="text-align:right;font-size: 14px;">
        {{ selectRow.deviceName}}
      </dd>
    </dl>
    <dl class="basicInfo-block cf">
      <dt class="basicInfo-item name" style="width: 140px;font-size: 14px;">所属产品&nbsp;:</dt>
      <dd class="basicInfo-item value" style="text-align:right;font-size: 14px;">
        {{selectRow.productName}}
      </dd>
    </dl>
    <dl class="basicInfo-block cf">
      <dt class="basicInfo-item name" style="width: 140px;font-size: 14px;">设备位置&nbsp;:</dt>
      <dd class="basicInfo-item value" style="text-align:right;font-size: 14px;">
        <span v-if="!editable">{{selectRow.location}}</span>
        <Input v-else style="width:calc(100% - 36px);" v-model="selectRow.location"></Input>
        <p style="display:inline;margin-left:10px;" @click="editLocation">
          <Icon type="ios-create-outline" size="22" style="line-height:.7;" />
        </p>
      </dd>
    </dl>
    <dl class="basicInfo-block cf">
      <dt class="basicInfo-item name" style="width: 140px;font-size: 14px;">设备状态&nbsp;:</dt>
      <dd class="basicInfo-item value" style="text-align:right;font-size: 14px;">
        {{selectRow.statusText}}
      </dd>
    </dl>
    <dl class="basicInfo-block cf">
      <dt class="basicInfo-item name" style="width: 140px;font-size: 14px;">设备秘钥&nbsp;:</dt>
      <dd class="basicInfo-item value" style="text-align:right;font-size: 14px;">
        {{selectRow.deviceSecret}}
      </dd>
    </dl>
    <dl class="basicInfo-block cf">
      <dt class="basicInfo-item name" style="width: 140px;font-size: 14px;">创建时间&nbsp;:</dt>
      <dd class="basicInfo-item value" style="text-align:right;font-size: 14px;">
        {{selectRow.createdAt?moment(selectRow.createdAt).format('YYYY-MM-DD HH:mm:ss'):'-'}}
      </dd>
    </dl>
    <dl class="basicInfo-block cf">
      <dt class="basicInfo-item name" style="width: 140px;font-size: 14px;">激活时间&nbsp;:</dt>
      <dd class="basicInfo-item value" style="text-align:right;font-size: 14px;">
        {{selectRow.activedAt?moment(selectRow.activedAt).format('YYYY-MM-DD HH:mm:ss'):'-'}}
      </dd>
    </dl>
    <dl class="basicInfo-block cf">
      <dt class="basicInfo-item name" style="width: 140px;font-size: 14px;">最近一次上线时间&nbsp;:</dt>
      <dd class="basicInfo-item value" style="text-align:right;font-size: 14px;">
        {{selectRow.onlineAt?moment(selectRow.onlineAt).format('YYYY-MM-DD HH:mm:ss'):'-'}}
      </dd>
    </dl>
  </i-col>
</template>
<script>
import { getIotDeviceInfo } from '@/api'
export default {
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data: () => ({ selectRow: {}, editable: false, nodeType: 0 }),
  mounted() {
    this.init()
  },
  watch: {
    id() {
      this.init()
    }
  },
  methods: {
    async init() {
      if (this.id) {
        const { code, data } = await getIotDeviceInfo(this.id)
        if (code === 200) {
          const { nodeType } = data
          this.nodeType = nodeType
          this.selectRow = data
        }
      }
    },

    editLocation() {
      if (this.editable) {
        this.editable = false
        // 需要保存
        console.log(this.selectRow.location)
      } else {
        this.editable = true
      }
    }
  }
}
</script>